<template>
  <div class="roleMan">
    <roleComponent :headerData="headerData" @childEvent="roleTableDataSearch()" :tableData="tableData"
      :headerDataAdd="headerDataAdd" @toFather="toFather" ref='GetRightData'>
      <!-- 左搜索 -->
      <template v-slot:searchSlotLeft>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="角色名称">
            <el-input v-model="formInline.roleName" placeholder="输入完整账号查询"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="roleTableDataSearch()"><i class="el-icon-search"></i> 查询</el-button>
            <el-button type="primary" @click="refresh()"><i class="el-icon-refresh-right"></i> 重置</el-button>
          </el-form-item>
        </el-form>
      </template>





      <!-- 左按钮 -->
      <template v-slot:btnSlotLeft>
        <el-button type="primary" @click="addRole(1)">
          <i class="el-icon-plus"></i> 新建角色
        </el-button>

      </template>

      <!-- 右按钮 -->
      <template v-slot:btnSlotRight>
        <el-button type="primary" @click="addRoleRight()">
          <i class="el-icon-plus"></i> 新建用户
        </el-button>
        <el-button type="primary" @click="userTableSearch">
          <i class="el-icon-plus"></i>已有用户
        </el-button>

      </template>




      <!-- 操作 -->
      <template v-slot:operation="{ row, scope }">
        <div>
          <a class="editTxt">用户</a>
          <el-dropdown trigger="click">
            <a>更多<i class="el-icon-arrow-down"></i></a>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <span @click="authorization(row)">授权</span>

              </el-dropdown-item>
              <el-dropdown-item>编辑</el-dropdown-item>
              <el-dropdown-item>
                <span @click="delDataSearch(row)">删除</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </template>



    </roleComponent>

    <!-- 新建角色dialog -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" v-DragWindow>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色名称" prop="diaRoleName">
          <el-input v-model="ruleForm.diaRoleName" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="角色编码" prop="diaCode">
          <el-input v-model="ruleForm.diaCode" placeholder="请输入角色编码"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="diaDescribe">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="description"
            :autosize="{ minRows: 4, maxRows: 6 }">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <el-button type="primary" @click="addSubmit">确定</el-button>
      </div>
    </el-dialog>


    <!-- 已有用户dialog -->
    <el-dialog title="添加已有用户" :visible.sync="dialogHaveVisible">
      <div class="searchHave">
        <span>用户账号：</span>
        <el-input placeholder="请输入用户账号" v-model="usernameHave"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="searchHaveTable">查询</el-button>
        <el-button type="primary" icon="el-icon-refresh-right"
        @click="refreshHaveTable">重置</el-button>
      </div>
      <el-table :data="haveTableData" style="width: 100%" stripe border>
        <el-table-column align="center" v-for="(item, index) in haveHeaderData" :key="index" :prop="item.prop"
          :label="item.label">
        </el-table-column>
      </el-table>
    </el-dialog>






    <!-- 抽屉 -->

    <el-drawer size="500" :title="drawerTitle" :visible.sync="drawer" :direction="direction">
      <!-- 抽屉内的实质内容 -->
      <div class="drawBox" v-infinite-scroll>
        <!-- 表单验证 -->
        <el-form :model="ruleFormDraw" :rules="rulesDraw" ref="ruleFormDraw" label-width="100px"
          class="demo-ruleFormDraw">
          <el-form-item label="用户账号" prop="userAccount" label-width="113px">
            <el-input v-model="ruleFormDraw.userAccount" placeholder="请输入用户账号"></el-input>
          </el-form-item>

          <template v-if="passwordIsShow">
            <el-form-item label="登录密码" prop="loginPassword" label-width="113px">
              <el-input v-model="ruleFormDraw.loginPassword" placeholder="请输入登录密码"></el-input>
            </el-form-item>

            <el-form-item label="确认密码" prop="checkPassword" label-width="113px">
              <el-input v-model="ruleFormDraw.checkPassword" placeholder="请输入确认密码"></el-input>
            </el-form-item>
          </template>


          <el-form-item label="用户姓名" prop="userName" label-width="113px">
            <el-input v-model="ruleFormDraw.userName" placeholder="请输入用户姓名"></el-input>
          </el-form-item>
          <el-form-item label="工号" prop="jobNumber" label-width="113px">
            <el-input v-model="ruleFormDraw.jobNumber" placeholder="请输入工号"></el-input>
          </el-form-item>
          <el-form-item label="职务" prop="job" label-width="113px" class="job">
            <el-select multiple v-model="select1" @visible-change="visibleChange1">
              <el-option v-for="item in selectOptions" :key="item.value" :label="item.value" :value="item.value">
              </el-option>
            </el-select>
            <el-button type="primary" icon="el-icon-search" @click="dialogFormVisibleDraw = true">搜索</el-button>
          </el-form-item>

          <el-form-item label="角色分配" prop="role" label-width="113px">
            <el-select v-model="ruleFormDraw.role" multiple placeholder="请选择角色">
              <el-option v-for="item in optionsDraw" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门分配" prop="department" label-width="113px">
            <el-input v-model="ruleFormDraw.department" placeholder="点击选择部门"></el-input>
          </el-form-item>
          <el-form-item label="租户分配" prop="rent" label-width="113px">
            <el-input v-model="ruleFormDraw.rent" placeholder="请选择租户分配"></el-input>
          </el-form-item>

          <el-form-item label="身份" prop="identity" label-width="113px">
            <el-radio-group v-model="ruleFormDraw.identity">
              <el-radio label="普通用户"></el-radio>
              <el-radio label="上级"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="头像" prop="picture" label-width="113px">
            <el-upload class="avatar-uploader" action :show-file-list="false" :http-request="httprequest">
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <el-form-item label="生日" prop="birthday" label-width="113px">
            <el-date-picker v-model="ruleFormDraw.birthday" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="性别" prop="sex" label-width="113px">
            <el-select class="select" v-model="ruleFormDraw.sex" placeholder="请选择性别" clearable>
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="邮箱" prop="email" label-width="113px">
            <el-input v-model="ruleFormDraw.email" placeholder="请选择邮箱"></el-input>
          </el-form-item>

          <el-form-item label="手机号码" prop="cellphone" label-width="113px">
            <el-input v-model="ruleFormDraw.cellphone" placeholder="请选择手机号码"></el-input>
          </el-form-item>
          <el-form-item label="座机" prop="telephone" label-width="113px">
            <el-input v-model="ruleFormDraw.telephone" placeholder="请选择座机"></el-input>
          </el-form-item>

          <el-form-item label="工作流引擎" prop="workflow" label-width="113px">
            <el-radio-group v-model="ruleFormDraw.workflow">
              <el-radio label="同步"></el-radio>
              <el-radio label="不同步"></el-radio>
            </el-radio-group>
          </el-form-item>

          <div class="drawBottom">
            <div class="right">
              <el-button>取消</el-button>
              <el-button type="primary" @click="addForm">提交</el-button>
            </div>
          </div>

          <!-- 上级部门下拉，select -->
        </el-form>
      </div>
    </el-drawer>

    <!--  授权抽屉-->
    <el-drawer size="500" title="角色权限配置" :visible.sync="drawerAuthor" :direction="direction">
      <div class="tree">
        <div class="treeTitle">所拥有的权限:</div>
        <el-tree :data="dataTree" show-checkbox default-expand-all node-key="key" ref="tree" highlight-current
          :check-strictly="isStrictly" :default-checked-keys="expendList" :props="defaultProps" @check='onCheck'>
        </el-tree>
      </div>
      <div class="buttonLeft">
        <!-- 树操作 -->
        <el-dropdown>
          <el-button type="plain">
            树操作<i class="el-icon-arrow-up el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <span @click="notStrictly">父子关联</span>
            </el-dropdown-item>
            <el-dropdown-item>
              <span @click="beStrictly">取消关联</span>
            </el-dropdown-item>
            <el-dropdown-item>
              <span @click="selectAll">全部勾选</span>
            </el-dropdown-item>
            <el-dropdown-item>
              <span @click="cancelAll">取消全选</span>
            </el-dropdown-item>
            <el-dropdown-item>
              <span @click="expendAll">展开所有</span>
            </el-dropdown-item>
            <el-dropdown-item>
              <span @click="combineAll">合并所有</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <div class="buttonRight">
        <!-- <template> -->
        <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="confirm()">
          <el-button slot="reference"> 取消</el-button>
        </el-popconfirm>
        <!-- </template> -->

        <el-button plain @click="saveDrawerAuthorSearch(1)">仅保存</el-button>
        <el-button plain @click="saveDrawerAuthorSearch(2)">保存并关闭</el-button>
      </div>






    </el-drawer>





  </div>
</template>
<script>
import {
  userTableData,
  addData,
  delData,
  mesTableData,
  excelExport,
  uploadimage
} from "@/api/api-wwx/sysUser";
import { roleTableData, addTableData, delTableData, treeData, treeDataSelected, saveDrawerAuthor } from "@/api/api-wwx/sysRole";
import roleComponent from "@/components/part-wwx/roleComponent.vue";

export default {
  name: "roleUserList",
  data() {
    let _self = this
    let validatediaRoleName = (rule, value, callback) => {
      let myreg = /^[a-zA-Z0-9_-]{4,16}$/;
      if (!myreg.test(value)) {
        console.log(!myreg.test(value));
        callback(new Error("长度在4-16个字符"));
      } else {
        console.log(!myreg.test(value));
        callback();
      }

    }
    let validateUserPassword = (rule, value, callback) => {
      let myreg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{6,}$/;

      if (!myreg.test(value)) {
        callback(new Error("密码应由6位以上字母、数字、字符串组合而成"));
      } else {
        callback();
      }
    };
    let validateCheckPassword = (rule, value, callback) => {
      if (_self.ruleFormDraw.checkPassword != _self.ruleFormDraw.loginPassword) {
        callback(new Error("两次输入的密码必须一致"));
      } else {
        callback();
      }
    };
    return {
      haveAccount: '',
      // 文本域
      description: '',
      // 新增表单名字
      title: '',
      dialogFormVisible: false,
      // 子传父的id
      idHere: '',
      // 数据
      tableData: [],

      //开始
      formInline: {
        roleName: "",
      },
      //表格头部
      headerData: [
        {
          prop: "roleCode",
          label: "角色编码",
        },
        {
          prop: "roleName",
          label: "角色名称",
        },
        {
          prop: "createTime",
          label: "创建时间",
        },
        {
          prop: "operation",
          label: "操作",

          slot: true,
        },
      ],
      headerDataAdd: [
        {
          prop: "username",
          label: "用户账号",
        },
        {
          prop: "realname",
          label: "用户名称",
        },
        {
          prop: "status_dictText",
          label: "状态",
        },
        // {
        //   prop: "operation",
        //   label: "操作",

        //   slot: true,
        // },
      ],
      // 新增框校验
      ruleForm: {
        diaRoleName: '',
        diaCode: ''
      },
      rules: {
        diaRoleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          {
            validator: validatediaRoleName,
            trigger: "change"
          },
        ],
      },
      //页码
      pageNo: 1,
      pageSize: 10,



      // 抽屉
      direction: "rtl",
      drawer: false,
      drawerTitle: '新增',
      ruleFormDraw: {
        userAccount: "", //用户账号
        loginPassword: "", //登陆密码
        checkPassword: "", //确认密码
        userName: "", //用户姓名
        jobNumber: "", //工号
        job: "", //职务
        role: "",
        department: "",
        rent: "",
        identity: "", //身份
        picture: "", //头像
        birthday: "",
        sex: "",
        email: null,
        cellphone: null,
        telephone: "",
        workflow: "",
        avatar: ''
      },
      select1: [],
      rulesDraw: {
        userAccount: [
          { required: true, message: "用户账号不能为空", trigger: "blur" }
        ],
        loginPassword: [
          {
            requrired: true,
            validator: validateUserPassword,
            trigger: "change"
          }
        ],
        checkPassword: [
          {
            required: true,
            validator: validateCheckPassword,
            trigger: "change"
          }
        ],
        userName: [
          { required: true, message: "用户姓名不能为空", trigger: "blur" }
        ],
        jobNumber: [{ required: true, message: "请输入工号", trigger: "blur" }]
      },
      passwordIsShow: true,
      selectOptions: [
        {
          value: "1",
          label: ""
        },
        {
          value: "2",
          label: ""
        },
        {
          value: "3",
          label: ""
        },
        {
          value: "4",
          label: ""
        }
      ],
      optionsDraw: [
        {
          value: "1",
          label: "第三方登录角色"
        },
        {
          value: "2",
          label: "财务出纳"
        },
        {
          value: "3",
          label: "Vue3角色"
        },
        {
          value: "4",
          label: "人力资源部"
        },
        {
          value: "5",
          label: "临时角色"
        },
        {
          value: "6",
          label: "管理员"
        }
      ],
      imageUrl: '',
      drawerAuthor: false,

      // 树
      dataTree: [
        //   {
        //   id: 1,
        //   label: '一级 1',
        //   children: [{
        //     id: 4,
        //     label: '二级 1-1',
        //     children: [{
        //       id: 9,
        //       label: '三级 1-1-1'
        //     }, {
        //       id: 10,
        //       label: '三级 1-1-2'
        //     }]
        //   }]
        // }, {
        //   id: 2,
        //   label: '一级 2',
        //   children: [{
        //     id: 5,
        //     label: '二级 2-1'
        //   }, {
        //     id: 6,
        //     label: '二级 2-2'
        //   }]
        // }, {
        //   id: 3,
        //   label: '一级 3',
        //   children: [{
        //     id: 7,
        //     label: '二级 3-1'
        //   }, {
        //     id: 8,
        //     label: '二级 3-2'
        //   }]
        // }
      ],

      // 树的属性
      defaultProps: {
        children: 'children',
        label: 'slotTitle'
      },
      expendList: [],

      roleId: '',
      permissionIds: '',//选中数据
      isStrictly: false,
      dialogHaveVisible: false,
      haveHeaderData: [
        {
          prop: "numXX",
          label: "#",
          width: "120",
          sortable: true
        },
        {
          prop: "username",
          label: "用户账号",
          width: "120",
          sortable: true
        },
        {
          prop: "realname",
          label: "用户姓名",
          width: "120"
        },
        {
          prop: "sex",
          label: "性别",
          width: "130",
          sortable: true
        },

        {
          prop: "phone",
          label: "手机号码",
          width: "140"
        },
        {
          prop: "orgCodeTxt",
          label: "部门"
        },


      ],
      haveTableData: [],
      usernameHave:''
    };
  },
  methods: {
    // 获取表格数据
    roleTableDataSearch() {
      let _self = this;
      _self.tableData = [];
      console.log(_self.formInline.roleName);
      let data = {
        pageNo: _self.pageNo,
        pageSize: _self.pageSize,
        roleName: _self.formInline.roleName
      };
      roleTableData(data).then((res) => {
        console.log(res);
        if (res.code == 0) {
          let list = res.result.records;
          console.log(list);

          for (let item of list) {
            _self.tableData.push({
              id: item.id,
              roleCode: item.roleCode,
              roleName: item.roleName,
              createTime: item.createTime.substring(0, 10)
            });

          }
        }
      });
    },

    // 子传父$emit过来的
    toFather(val) {
      console.log(val);
      this.idHere = val
    },

    // 重置
    refresh() {
      let _self = this;
      _self.formInline.roleName = "";
      this.roleTableDataSearch();
    },

    // 新建或者角色
    addRole(num) {
      let _self = this
      this.dialogFormVisible = true
      // 新增
      if (num == 1) {
        this.title = '新增'

      }
    },

    // 新增确定

    addSubmit() {
      let _self = this
      let data = {
        description: _self.description,
        roleCode: _self.ruleForm.diaCode,
        roleName: _self.ruleForm.diaRoleName
      }
      console.log(data);
      addTableData(data).then(res => {
        console.log(res);
        if (res.code == 200) {
          _self.roleTableDataSearch()
          _self.dialogFormVisible = false
        }

      })
    },
    // 删除数据
    delDataSearch(row) {
      let _self = this
      console.log(row);
      let data = {
        id: row.id,

      }
      delTableData(data).then(res => {
        console.log(res);
        if (res.code == 200) {
          console.log(1324);
          _self.roleTableDataSearch()

        }

      })
    },

    // 右侧增加角色
    addRoleRight() {
      this.drawer = true
    },
    visibleChange1(data) {
      console.log("////// 下拉框出现时候:", data);
      console.log("////// 下拉框出现时候 222:", this.selectOptions);
      let arr = JSON.parse(JSON.stringify(this.selectOptions));
      console.log("/// arr:", arr);
      console.log("//// this.select1", this.select1);
      if (data == true && this.select1.length == 0) {
        this.select1.push(arr[0].value);
      }
    },
    // 上传图片
    httprequest(par) {
      console.log(par);

      let _self = this;
      // par.flie当前图片对象

      // 图片对象上传的话 必须以form表单进行上传
      let formatDate = new FormData();
      formatDate.append('biz', 'temp')
      formatDate.append('file', par.file)


      uploadimage(formatDate).then((res) => {
        console.log(res);
        if (res.code == 0) {
          _self.imageUrl = `http://localhost:8080/jeecg-boot/sys/common/static/${res.message}`
          _self.ruleFormDraw.avatar = res.message
          console.log(_self.formInline.avatar);
        }
      });
    },
    // 右侧
    refreshHaveTable(){
      this.usernameHave=''
      this.userTableDataSearch()
    },
    // 点击增加
    async addForm() {
      let _self = this;
      console.log(_self.ruleFormDraw.avatar);
      console.log(_self.idHere);
      let data = {
        selectedroles: _self.idHere,
        activitiSync: "1",
        avatar: `http://localhost:8080/jeecg-boot/sys/common/static/${_self.ruleFormDraw.avatar}`,
        birthday: _self.ruleFormDraw.birthday,
        confirmpassword: _self.ruleFormDraw.checkPassword,
        departIds: "",
        email: _self.ruleFormDraw.email,
        phone: _self.ruleFormDraw.cellphone,
        // post:'',
        realname: _self.ruleFormDraw.userName,
        realTenantIds: "",
        selecteddepartment: "",
        sex: _self.ruleFormDraw.sex,
        userIdentity: "1",
        username: _self.ruleFormDraw.userName,
        workNo: _self.ruleFormDraw.jobNumber
      };
      await addData(data).then(res => {
        console.log(res);
        if (res.code == 200) {
          _self.drawer = false;
          console.log(_self);
          _self.$refs['GetRightData'].roleTableDataAddSearch()
        }
      });

    },
    searchHaveTable(){
      this.userTableDataSearch()
    },
    // 授权
    authorization(row) {
      this.drawerAuthor = true
      this.treeDataSearch()//树
      let idx = row.id
      this.roleId = row.id
      console.log(row)
      this.treeDataSelectedSearch(idx)//选中情况


    },
    // 请求树
    treeDataSearch() {
      let _self = this
      treeData().then(res => {
        console.log(res);
        if (res.code == 0) {
          _self.dataTree = res.result.treeList
        }
      })
    },

    // 请求树选中情况permission
    treeDataSelectedSearch(id) {
      let _self = this
      let data = {
        roleId: id
      }
      treeDataSelected(data).then(res => {
        console.log(res);
        if (res.code == 0) {
          _self.expendList = res.result

        }
      })
    },

    // 全部勾选
    selectAll() {
      this.$refs.tree.setCheckedNodes(this.dataTree);
    },
    cancelAll() {
      this.$refs.tree.setCheckedNodes([])
    },
    expendAll() {
      for (var i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
        this.$refs.tree.store._getAllNodes()[i].expanded = true;
      }

    },
    combineAll() {
      for (var i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
        this.$refs.tree.store._getAllNodes()[i].expanded = false;
      }
    },
    confirm() {
      this.drawerAuthor = false
      console.log(1234);
    },

    // 点击树事件
    onCheck(a, b) {
      console.log(a);
      console.log(b);
      this.permissionIds = b.checkedKeys.join(',')
      console.log(this.permissionIds);
    },
    // 仅保存和保存并关闭
    saveDrawerAuthorSearch(val) {
      let _self = this
      if (!_self.permissionIds) {
        this.permissionIds = this.expendList.join(',')
      }
      let data = {
        lastpermissionIds: this.expendList.join(','),
        permissionIds: this.permissionIds,
        roleId: this.roleId
      }
      saveDrawerAuthor(data).then(res => {
        console.log(res);
        _self.treeDataSearch()
        _self.treeDataSelectedSearch(this.roleId)
      })
      console.log(data)
      if (val == 2) {
        this.drawerAuthor = false
      }
    },
    // 父子关联
    notStrictly() {
      this.isStrictly = false
      this.treeDataSearch()
      this.treeDataSelectedSearch(this.roleId)
    },
    beStrictly() {
      this.isStrictly = true
      this.treeDataSearch()
      this.treeDataSelectedSearch(this.roleId)
    },
    userTableSearch() {
      this.dialogHaveVisible = true
      this.userTableDataSearch()
    },

    userTableDataSearch() {
      let _self = this;
      console.log(_self.formInline.account);
      _self.haveTableData = [];
      let data = {

        pageNo: _self.pageNo,
        pageSize: _self.pageSize,
        username: _self.usernameHave,
        sex: '',
        realname: '',
        phone: '',
        status: '',
      };
      userTableData(data).then(res => {
        console.log(res);
        if (res.code == 0) {
          _self.total = res.result.total
          let list = res.result.records;
          console.log(list);
          _self.idList = [];
          let num = 0
          for (let item of list) {
            num++
            _self.haveTableData.push({
              numXX: num,
              username: item.username,
              realname: item.realname,
              avatar: item.avatar,
              sex: item.sex,
              birthday: item.birthday,
              phone: item.phone,
              orgCodeTxt: item.orgCodeTxt,
              departIds_dictText: item.departIds_dictText,
              status_dictText: item.status_dictText,
              operation: item.operation
            });
            _self.idList.push(item.id);
          }
        }
      });



    }
  },

  mounted() {
    this.roleTableDataSearch();

  },
  components: {
    roleComponent
  },
};
</script>
<style>
.left {
  margin: left
}

.right {
  margin: right
}

.clear {
  clear: both
}

.roleMan .editTxt {
  border-right: 2px solid rgb(206, 202, 202);
  padding-right: 20px;
  line-height: 14px;
}

.roleMan a {
  margin-left: 20px;
}

.roleMan .el-dialog__body {
  width: 90%
}

.choosedatadel {
  color: #63b0ff;
}

.roleMan .choosedatadel:hover {
  cursor: pointer;
}

.chooseTxt {
  margin-bottom: 20px;
  font-weight: bolder;
}

.el-drawer__body {
  overflow: auto;
  /* 滚动条隐藏 */

  /* overflow-x: auto; */
}

.el-drawer__container ::-webkit-scrollbar {
  display: none;
}

.roleMan .tablePic {
  width: 50px;
  height: 50px;
}

.roleMan a {
  margin-left: 20px;
}

.roleMan .el-drawer {
  width: 658px;
}

.roleMan .editTxt {
  border-right: 2px solid rgb(206, 202, 202);
  padding-right: 20px;
  line-height: 14px;
}

.roleMan .el-drawer__header {
  border-bottom: 1px solid rgb(210, 208, 208);
  padding-bottom: 20px;
}

.roleMan .drawBox {
  width: 500px;
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 60px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.roleMan .el-date-editor {
  width: 100%;
}

.roleMan .el-select {
  width: 100%;
}

.drawBottom {
  position: absolute;
  bottom: 0;
  right: 0;
}

.el-drawer__title {
  position: relative;
}

.drawBottom {
  padding: 10px;
  width: 658px;
  background-color: #ffffff;
  border-top: 1px solid rgb(216, 213, 213);
}

.roleMan .el-input--prefix .el-input__inner {
  padding-left: 70x;
}

.roleMan .job .el-select {
  width: 70%;
  margin-right: 20px;
}

.roleMan .el-dialog {
  position: relative;
  width: 60%;
}

.roleMan .el-dialog .el-input {
  width: 50%;
  margin-right: 20px;
}

.roleMan .tree {
  margin-left: 20px
}

.roleMan .treeTitle {
  margin-bottom: 10px
}

.roleMan .el-drawer__body {
  margin-bottom: 50px;
  border-bottom: 1px solid #d9d9d9
}

.roleMan .buttonLeft {
  position: absolute;
  left: 0;
  bottom: 0;
}

.roleMan .buttonRight {
  position: absolute;
  right: 0;
  bottom: 0;
}

.roleMan .el-dialog__header {
  border-bottom: 1px solid #d9d9d9
}

.searchHave {
  margin-bottom: 30px
}
</style>